<template>
  <div v-title data-title="满易金">
    <!--<home-swiper :list="swiperList" v-if="swiperList.length && isKeep"></home-swiper>-->
    <!--<div class="waitting-swiper" v-if="(!swiperList.length || !isKeep) && waitingShow">-->
      <!--<img class="logo" src="/static/img/logo_grey@2x.png">-->
    <!--</div>-->
    <loan-card class="loan-card"></loan-card>
    <theme-title :title="'财富优选'"></theme-title>
    <div class="wealth-box flex-center">
      <router-link tag="div" to="/content" class="flex-col-center">
        <img src="/static/img/loan.png"/>
        <span>贷款</span>
      </router-link>
      <router-link tag="div" to="/freeCard" class="flex-col-center">
        <img src="/static/img/banka.png"/>
        <span>办卡</span>
      </router-link>
      <div class="flex-col-center p-r">
        <img src="/static/img/baoxian.png"/>
        <span>保险</span>
        <span class="p-a badge">敬请期待</span>
      </div>
      <router-link tag="div" to="/spread" class="flex-col-center">
        <img src="/static/img/tuiguang.png"/>
        <span>推广</span>
      </router-link>
    </div>
    <div class="divide-line"></div>
    <theme-title class="m-t-10" :title="part1List.itemTitle"></theme-title>
    <div class="new-arrival-card-list">
      <div class="new-arrival-card" @click="redirectToThirdParty(item)" v-for="item in part1List.itemList">
        <div class="top">
          <img class="logo" :src="item.carouselImg"/>
          <div class="title">{{item.carouselTitle}}</div>
        </div>
        <div class="bottom desc">
          {{item.feature}}
        </div>
      </div>
    </div>
    <theme-title :title="part2List.itemTitle"></theme-title>
    <div class="jp-card-list">
      <div class="flex">
        <div class="jp-card" @click="redirectToThirdParty(item)" v-for="item in part2List.itemList">
          <div class="top">
            <img class="logo" :src="item.carouselImg"/>
            <span class="desc">{{item.carouselTitle}}</span>
          </div>
          <div class="content">
            <span v-for="i in item.featureArray">{{i}}</span>
          </div>
        </div>
      </div>
    </div>
    <theme-title :title="part3List.itemTitle"></theme-title>
    <div class="special-list" @click="redirectToThirdParty(item)" v-for="item in part3List.itemList">
      <img :src="item.carouselImg"/>
    </div>
    <bottom></bottom>
  </div>
</template>
<script>
  import HomeSwiper from '@/components/Swiper'
  import LoanCard from '@/components/loanCard'
  import ThemeTitle from '@/components/themeTitle'
  import bottom from '@/components/bottom'
  import { httpReq } from '@/common/api'
  import {mapMutations} from 'vuex'
  export default{
    name:'Home',
    components:{
      HomeSwiper,
      ThemeTitle,
      bottom,
      LoanCard
    },
    data(){
        return{
          swiperList:[],
          isKeep:false,
          waitingShow:true,
          part1List:{},
          part2List:{},
          part3List:{},
          part1:'',
          part2:'',
          part3:'',
        }
    },
    methods:{
      ...mapMutations(['changeProduct']),
      getSwiperList(){
        httpReq('GET','/list/as/app/financial/home/Carouse/v2',{adsense:1}).then((res)=>{
          this.swiperList = this._.find(res,(o)=>{
              return o.itemTitle === "轮播图"
          }).itemList;
          if(!this.swiperList.length){
            this.waitingShow = false
          }
          this.part1List = this._.find(res,(o,idx)=>{
            return idx===1
          });
          this.part2List = this._.find(res,(o,idx)=>{
            return idx===2
          });
          this.part3List = this._.find(res,(o,idx)=>{
            return idx===3
          });
        }).catch((err)=>{
          this.waitingShow = false
        })
      },
      redirectToThirdParty(item){
        switch (item.type){
          case '1':
            this.changeProduct(item);
            this.$router.push({
              name: 'product',
              query: {
                id: item.productId,
                name:item.carouselTitle
              }
            })
            break;
          case '2':
            this.$router.push({
              name: 'creditcardDetail',
              query: {
                id: item.productId,
                name:item.carouselTitle
              }
            })
            break;
          case '3':
            if(item.carouselUrl){
              window.location.href = item.carouselUrl
            }
        }
      }
    },
    activated(){
      this.isKeep = true
    },
    deactivated(){
      this.isKeep = false
    },
    created(){
      this.getSwiperList()
    }
  }
</script>
<style lang="stylus" scoped>
  @import "~style/varibles.styl"
  @import "~style/mixins.styl"
  .loan-card
    margin .24rem
  .flex
    display flex
  .waitting-swiper
    height :3.1rem
    background-color $bgWait
    margin .1rem .2rem .2rem .2rem
    box-shadow()
    border-radius :.2rem
    position relative
    .logo
      width 1.16rem
      height 1.46rem
      position absolute
      top 50%
      left 50%
      transform translate(-50%,-50%)
  .divide-line
    height .2rem
    background #F6F6F6
  .wealth-box
    padding .48rem .4rem
    box-sizing border-box
    justify-content space-around
    color $darkTextColor
    img
      margin-bottom .3rem
      width 1.1rem
      height 1.1rem
    .badge
      font-size .22rem
      color #504F4F
      background rgba(231,231,231,.75)
      border-radius 10rem
      padding .1rem .15rem
      right -.5rem
      top -.2rem
      no-wrap()
  .new-arrival-card-list
    padding .26rem
    display flex
    flex-wrap wrap
    box-sizing border-box
    width 100%
    .new-arrival-card
      width 49%
      box-sizing border-box
      background-color #F7F9FA
      padding .26rem
      .top
        display flex
        align-items center
        .logo
          width .48rem
          height .48rem
          border-radius .08rem
        .title
          font-size .3rem
          color $darkTextColor
          font-weight bold
          margin-left .16rem
      .bottom
        font-size .24rem
        color $disabledText
        margin-top .14rem
  .jp-card-list
    overflow-x scroll
    padding .3rem .26rem
    display flex
    .jp-card
      height 2.12rem
      width 2.9rem
      flex none
      text-align center
      padding .4rem 0
      box-sizing border-box
      box-shadow()
      .top
        justify-content center
        display flex
        align-items center
        margin 0 auto
        .logo
          width .48rem
          height .48rem
          border-radius .08rem
        .desc
          font-size .3rem
          font-weight bold
          color $darkTextColor
          margin-left .16rem
      .content
        display flex
        flex-direction column
        align-items center
        margin-top .2rem
        color $disabledText
        font-size .24rem
        span
          line-height .34rem
    .jp-card +.jp-card
      margin-left .3rem
    .jp-card:last-child
      margin-right .3rem

  .special-list
    padding 0 .24rem
    padding-top .24rem
    img
      height 1.8rem
      width 100%
    img + img
      margin-top .24rem
  .new-arrival-card-list
    for i in 2 4
      .new-arrival-card:nth-child({i})
        margin-left  1%
    for i in 1 3
      .new-arrival-card:nth-child({i})
        margin-right 1%
    for i in 3 4
      .new-arrival-card:nth-child({i})
        margin-top 2%








</style>
